<template>
    <div class="index-container">
        <div class="navigation-bar" :style="{ width: panelConfig.showNavigation ? '200px' : '60px' }">
            <navigationBar />
        </div>
        <div class="content-container" :style="{ width: routerStyle.width }">
            <div class="header-panel" :style="{ height: panelConfig.showHeader ? '60px' : '0px' }">
                <headerPanel />
            </div>
            <div class="router-container" :style="{ height: routerStyle.height }">
                <div class="navigation-tools-view" @click="hideNavigation">
                    <el-icon v-show="panelConfig.showNavigation"><ArrowLeft /></el-icon>
                    <el-icon v-show="!panelConfig.showNavigation"><ArrowRight /></el-icon>
                </div>
                <div class="header-tools-view" @click="hideHeader">
                    <el-icon v-show="panelConfig.showHeader"><ArrowUp /></el-icon>
                    <el-icon v-show="!panelConfig.showHeader"><ArrowDown /></el-icon>
                </div>
                <div class="bottom-tools-view" @click="hideBottom">
                    <el-icon v-show="panelConfig.showBottom"><ArrowDown /></el-icon>
                    <el-icon v-show="!panelConfig.showBottom"><ArrowUp /></el-icon>
                </div>
                <router-view />
            </div>
            <div class="bottom-panel" :style="{ height: panelConfig.showBottom ? '60px' : '0px' }">
                <bottomPanel />
            </div>
        </div>
    </div>
</template>

<script setup>
import navigationBar from '@/components/navigation-bar.vue'
import headerPanel from '@/components/header-panel.vue'
import bottomPanel from '@/components/bottom-panel.vue'
import { ref, onMounted } from 'vue'
const panelConfig = ref({
    showNavigation: true,
    showHeader: true,
    showBottom: true
})
const routerStyle = ref({
    width: '100%',
    height: '100%'
})

const hideNavigation = ()=> {
    panelConfig.value.showNavigation = !panelConfig.value.showNavigation
    localStorage.setItem('showNavigation', panelConfig.value.showNavigation)
    initStyle()
}
const hideHeader = ()=> {
    panelConfig.value.showHeader = !panelConfig.value.showHeader
    localStorage.setItem('showHeader', panelConfig.value.showHeader)
    initStyle()
}

const hideBottom = ()=> {
    panelConfig.value.showBottom = !panelConfig.value.showBottom
    localStorage.setItem('showBottom', panelConfig.value.showBottom)
    initStyle()
}

const initRouterStyle = ()=> {
    const showNavigation = localStorage.getItem('showNavigation')
    const showHeader = localStorage.getItem('showHeader')
    const showBottom = localStorage.getItem('showBottom')
    panelConfig.value = {
        showNavigation: showNavigation != 'false',
        showHeader: showHeader != 'false',
        showBottom: showBottom != 'false'
    }
}

const initStyle = ()=> {
    if (panelConfig.value.showNavigation) {
        if(routerStyle.value.width != 'calc(100% - 200px)') {  
            routerStyle.value.width = 'calc(100% - 200px)'
        }
    }else {
        if(routerStyle.value.width != 'calc(100% - 60px)') {  
            routerStyle.value.width = 'calc(100% - 60px)'
        }
    }
    if (panelConfig.value.showHeader && panelConfig.value.showBottom) {
        if(routerStyle.value.height != 'calc(100% - 120px)') {  
            routerStyle.value.height = 'calc(100% - 120px)'
        }
    }else if (panelConfig.value.showHeader && (!panelConfig.value.showBottom)) {
        if(routerStyle.value.height != 'calc(100% - 60px)') {  
            routerStyle.value.height = 'calc(100% - 60px)'
        }
    }else if (panelConfig.value.showBottom && (!panelConfig.value.showHeader)) {
        if(routerStyle.value.height != 'calc(100% - 60px)') {  
            routerStyle.value.height = 'calc(100% - 60px)'
        }
    }else {
        if(routerStyle.value.height != '100%') {  
            routerStyle.value.height = '100%'
        }
    }
}

onMounted(() => {
    initRouterStyle()
    initStyle()
})

</script>

<style scoped>
.index-container {
    width: 100%;
    height: 100%;
}
.navigation-bar {
    width: 200px;
    height: 100%;
    overflow: hidden;
    transition: all 0.3s ease;
    float: left;
}
.content-container {
    height: 100%;
    float: left;
}
.header-panel {
    width: 100%;
    height: 60px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.bottom-panel {
    width: 100%;
    height: 60px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.router-container {
    transition: all 0.3s ease;
    position: relative;
    padding: 12px;
}
.navigation-tools-view {
    width: 39px;
    height: 40px;
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
    text-align: center;
    line-height: 38px;
    color: #ccc;
    transition: all 0.3s ease;
    cursor: pointer;
}
.navigation-tools-view:hover {
    color: #148962;
}
.header-tools-view {
    width: 39px;
    position: absolute;
    top: 0;
    left: calc(50% - 20px);
    text-align: center;
    line-height: 38px;
    color: #ccc;
    transition: all 0.3s ease;
    cursor: pointer;
}
.header-tools-view:hover {
    color: #148962;
}
.bottom-tools-view {
    width: 39px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 20px);
    text-align: center;
    line-height: 38px;
    color: #ccc;
    transition: all 0.3s ease;
    cursor: pointer;
}
.bottom-tools-view:hover {
    color: #148962;
}
</style>